<template>
  <FormTableLayout>
    <template #form>Flexi-Templates</template>
    <template #tools>
      <el-button :icon="Plus" type="primary" size="small" plain @click="handleClickBtnAdd">新建</el-button>
    </template>
    <template #default>
      <el-table :data="tableData" style="width: 100%" border scrollbar-always-on header-cell-class-name="table-header-row" empty-text="没有数据">
        <el-table-column prop="id" label="ID" width="100" />
        <el-table-column prop="name" label="分类名称" />
        <el-table-column prop="parent_id" label="父级ID" />
        <el-table-column prop="level" label="层级" />
        <el-table-column prop="path" label="路径" />
        <el-table-column />
        <el-table-column fixed="right" label="Operations" width="120">
          <template #default="scope">
            <el-button @click="handleClickBtnEditMenu(scope.row)" type="primary" :icon="Edit" size="small" link>编辑</el-button>
            <el-button @click="handleClickBtnDeleteMenu(scope.row.id)" type="danger" :icon="Delete" size="small" link>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template #other>
      <DrawersEdit ref="refDrawersEdit" @submit="handleDrawersEditSubmit" />
    </template>
  </FormTableLayout>
</template>

<script setup lang="ts">
import FormTableLayout from '@/layout/FormTableLayout.vue'
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import DrawersEdit from './drawers/Edit.vue'
import Dal from '@/dal'

const refDrawersEdit = ref()
const tableData = ref([])
const drawerVisible = ref(false)
const selectedTemplateId = ref<number | null>(null)

const handleClickBtnAdd = () => {
  if (refDrawersEdit.value) {
    refDrawersEdit.value.open()
  }
}

const handleDrawersEditSubmit = async () => {
  await getDataList()
}
const handleClickBtnEditMenu = async (val: any) => {
  if (refDrawersEdit.value) {
    selectedTemplateId.value = val.templateId
    drawerVisible.value = true
  }
}
const handleClickBtnDeleteMenu = async (val: any) => {
  console.log(val)
}

// resetPassword

const getDataList = async () => {
  const res = await Dal.FlexiPage.Templates.findAll({})
  tableData.value = res.data
}

onMounted(async () => {
  await getDataList()
})
</script>
